<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :span="18">
        <el-row :gutter='10'>
          <el-col :span='12' class="block_wrap">
            <el-card class="box-card">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabs" :key='index'>
                  <div class="data_info">
                    <div class="title recruiter">招聘者</div>
                    <el-row :gutter="10">
                      <el-col :span="6">
                        <div class="data_block one">
                          <p class="data_title">新增招聘者</p>
                          <span  class="data_num">{{data.count_new_company}}</span>
                          <!-- <div class="flex_box_between">
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block two">
                          <p class="data_title">累计招聘者</p>
                          <span class="data_num">{{data.count_company}}</span>
                          <!-- <div class="flex_box_between">
                            <span class="data_num">{{data.count_company}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block three">
                          <p class="data_title">新增岗位数</p>
                          <span  class="data_num">{{data.count_new_post}}</span>
                          <!-- <div class="flex_box_between">
                            <span  class="data_num">{{data.count_new_post}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block four">
                          <p class="data_title">累计岗位数</p>
                          <span  class="data_num">{{data.count_post}}</span>
                          <!-- <div class="flex_box_between">
                            <span  class="data_num">{{data.count_post}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                    </el-row>
                    <div class="title jobs">
                      求职者
                    </div>
                    <el-row :gutter="10">
                      <el-col :span="6">
                        <div class="data_block five">
                          <p class="data_title">新增求职者</p>
                          <span  class="data_num">{{data.count_new_user}}</span>
                          <!-- <div class="flex_box_between one">
                            <span  class="data_num">{{data.count_new_user}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block six">
                          <p class="data_title">累计求职者</p>
                          <span  class="data_num">{{data.count_user}}</span>
                          <!-- <div class="flex_box_between">
                            <span  class="data_num">{{data.count_user}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block seven">
                          <p class="data_title">新增简历数</p>
                          <span  class="data_num">{{data.count_new_resume}}</span>
                          <!-- <div class="flex_box_between">
                            <span  class="data_num">{{data.count_new_resume}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="data_block eight">
                          <p class="data_title">累计简历数</p>
                          <span  class="data_num">{{data.count_resume}}</span>
                          <!-- <div class="flex_box_between">
                            <span  class="data_num">{{data.count_resume}}</span>
                            <p class="data_icon"></p>
                          </div> -->
                        </div>
                      </el-col>
                    </el-row>
                    <div class="title tops">职位热度排行TOP5</div>
                    <div class="bar_list">
                      <div class="bar_item" v-for="(item,index) in data.post_hot" :key='index'>
                        <span class="bar_title">{{item.value_name}}</span>
                        <p class="progress" :style="'width:'+item.score+'px'"></p>
                        <span class="score">{{item.score}}</span>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
          <el-col :span='12' class="block_wrap">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span><i class="iconfont icon-area"></i> 用户地域分布（累计）</span>
              </div>
              <userarea :list='user_addres'></userarea>
            </el-card>
          </el-col>
        </el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="iconfont icon-shujukanban"></i>平台访问量/新增用户量</span>
          </div>
          <xian :datas='xianDatas'></xian>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="iconfont icon-bili"></i>个人用户年龄分布（累计）</span>
          </div>
          <pie :list='pieData' :total='userTotal'></pie>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span><i class="iconfont icon-fangwenliang"></i>企业访问热度排行</span>
          </div>
          <div class="companyData">
            <div class="bar_list" v-if="data.company_visit&&data.company_visit.length>0">
              <div class="bar_item" v-for="(item,index) in data.company_visit" :key='index'>
                <span class="bar_title">{{item.company_info?item.company_info.name:''}}</span>
                <p class="progress progress_company" :style="'width:'+item.count_company+'px'"></p>
                <span class="score">{{item.count_company}}</span>
              </div>
            </div>
            <noData  v-show="!data.company_visit || !data.company_visit.length"></noData>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import adminDashboard from './admin'
import { mapArea } from  '@/utils/map.js'
import xian from './components/xian.vue'
import bar from './components/bar.vue'
import pie from './components/pie.vue'
import userarea from './components/userarea.vue'
import noData from "./components/noData.vue";
export default {
  name: 'Dashboard',
  components: { adminDashboard },
  data() {
    return {
      url:'/profession/admin/data',
      currentRole: 'adminDashboard',
      activeName: 'first',
      tabs:[
        {id:3,name:'first',label:'本月'},
        {id:1,name:'second',label:'今日'},
        {id:2,name:'third',label:'本周'},
        {id:4,name:'fourth',label:'本年'},
        {id:5,name:'fivth',label:'截止目前'}
      ],
      queryParam:{
        date_type:'3',
      },
      xianDatas:{
        list:[
          {
            name: '平台访问量',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: '新增用户量',
            type: 'line',
            stack: '总量',
            data: []
          },
        ],
        legend:['平台访问量','新增用户量'],
        xAxisLabelArr:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      pieData:[
        {value: 0, name: '21岁及以下'},
        {value: 0, name: '22-30岁'},
        {value: 0, name: '31-40岁'},
        {value: 0, name: '41-50岁'},
        {value: 0, name: '51岁及以上'}
      ],
      user_addres:[],
      data:'',
      userTotal:0 // 年龄分布总人数
    }
  },
  mounted() {
    // mapArea()
    this.getData()
  },
  methods:{
    getData() {
      this.$http.get(this.url,{params:this.queryParam}).then(response => {
        if (response.code == 10000) {
          this.data = response.data.data || response.data
          this.initXianDatas()
          this.initPieData()
          this.initUserAddres()
        }
      })
    },
    // 初始化平台访问量/新增用户量
    initXianDatas() {
      this.xianDatas.list[0].data = []
      this.xianDatas.list[1].data = []
      if (this.data.visit) {
        this.data.visit.forEach(res => {
          this.xianDatas.list[0].data.push(res.data)
        });
      }
      if (this.data.new_user) {
        this.data.new_user.forEach(res => {
          this.xianDatas.list[1].data.push(res.data)
        })
      }
      
      this.xianDatas.xAxisLabelArr = []
      let date_type = this.queryParam.date_type
      if (date_type == 1) {
        for (let i=1;i<=24;i++) {
          this.xianDatas.xAxisLabelArr.push(i<10?'0'+i+':00':i+':00')
        }
      } else if (date_type == 2) {
        for (let i=1;i<=7;i++) {
          this.xianDatas.xAxisLabelArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      } else if (date_type == 3) {
        for (let i=1;i<=30;i++) {
          this.xianDatas.xAxisLabelArr.push(i)
        }
      } else if (date_type == 4) {
        for (let i=1;i<=12;i++) {
          this.xianDatas.xAxisLabelArr.push(i)
        }
      } else if (date_type == 5) {
        for (let i=1;i<=30;i++) {
          this.xianDatas.xAxisLabelArr.push(i)
        }
      }
    },
    // 初始化年龄分布数据
    initPieData() {
      let total = 0
      if (this.data.user_age) {
        this.data.user_age.forEach((res,index) => {
          this.pieData[index].value = res
          total+=res
        });
      }
      this.userTotal = total
    },
    // 初始化地区分布数据
    initUserAddres() {
      this.user_addres = []
      for (let key in this.data.user_addres) {
        let res = this.data.user_addres[key]
        this.user_addres.push({
          name:key,
          value:res.count,
          company_count:res.company_count,
          user_count:res.user_count
        })
      }
    },
    handleClick(tab, event) {
      this.queryParam.date_type = this.tabs[tab.index].id
      this.getData()
    }
  },
  components:{
    pie,
    bar,
    xian,
    noData,
    userarea
  }
}
</script>
<style lang="scss" scoped>
  #ecwrap{
    width:500px;
    height:400px;
  }
  .dashboard-container{
    padding: 10px;
  }
  .box-card{
    margin-bottom: 10px;
  }
  .data_info{
    height: 440px;
    padding:0 6px 6px;
    box-sizing: border-box;
  }
  .title{
    width: 206px;
    height: 32px;
    line-height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding-left: 40px;
    box-sizing: border-box;
    margin: 10px 0;
    font-size: 16px;
  }
  .title.recruiter{
    background-image: url('../../assets/images/bg1.png');
    color:#72C0FF;
  }
  .title.jobs{
    background-image: url('../../assets/images/bg2.png');
    color:#FFC665;
  }
  .title.tops{
    background-image: url('../../assets/images/bg3.png');
    color:#FF8484;
  }
  .data_block{
    position: relative;
    // width: 144px;
    height: 70px;
    padding: 8px 14px;
    // box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .data_block.one{
    background-image: url('../../assets/images/bg4.png');
    color:#FF8484;
  }
  .data_block:hover.one{
    background-image: url('../../assets/images/bg16.png');
    color:#fff;
  }
  .data_block.two{
    background-image: url('../../assets/images/bg11.png');
    color:#CE84FF;
  }
  .data_block:hover.two{
    background-image: url('../../assets/images/bg17.png');
    color:#fff;
  }
  .data_block.three{
    background-image: url('../../assets/images/bg5.png');
    color:#69DED7;
  }
  .data_block:hover.three{
    background-image: url('../../assets/images/bg18.png');
    color:#fff;
  }
  .data_block.four{
    background-image: url('../../assets/images/bg6.png');
    color:#84A5FF;
  }
  .data_block:hover.four{
    background-image: url('../../assets/images/bg19.png');
    color:#fff;
  }
  .data_block.five{
    background-image: url('../../assets/images/bg7.png');
    color:#84A5FF;
  }
  .data_block:hover.five{
    background-image: url('../../assets/images/bg15.png');
    color:#fff;
  }
  .data_block.six{
    background-image: url('../../assets/images/bg8.png');
    color:#84A5FF;
  }
  .data_block:hover.six{
    background-image: url('../../assets/images/bg14.png');
    color:#fff;
  }
  .data_block.seven{
    background-image: url('../../assets/images/bg9.png');
    color:#84A5FF;
  }
  .data_block:hover.seven{
    background-image: url('../../assets/images/bg13.png');
    color:#fff;
  }
  .data_block.eight{
    background-image: url('../../assets/images/bg10.png');
    color:#84A5FF;
  }
  .data_block:hover.eight{
    background-image: url('../../assets/images/bg12.png');
    color:#fff;
  }
  .data_title{
    font-size: 14px;
  }
  .data_icon{
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  // .data_block.one .data_icon{
  //   background-image: url('../../assets/images/icon2.png');
  // }
  // .data_block.one:hover .data_icon{
  //   background-image: url('../../assets/images/icon1.png');
  // }
  // .data_block.two .data_icon{
  //   background-image: url('../../assets/images/icon4.png');
  // }
  // .data_block.two:hover .data_icon{
  //   background-image: url('../../assets/images/icon3.png');
  // }
  // .data_block.three .data_icon{
  //   background-image: url('../../assets/images/icon6.png');
  // }
  // .data_block.three:hover .data_icon{
  //   background-image: url('../../assets/images/icon5.png');
  // }
  // .data_block.four .data_icon{
  //   background-image: url('../../assets/images/icon8.png');
  // }
  // .data_block.four:hover .data_icon{
  //   background-image: url('../../assets/images/icon7.png');
  // }
  // .data_block.five .data_icon{
  //   background-image: url('../../assets/images/icon10.png');
  // }
  // .data_block.five:hover .data_icon{
  //   background-image: url('../../assets/images/icon9.png');
  // }
  // .data_block.six .data_icon{
  //   background-image: url('../../assets/images/icon12.png');
  // }
  // .data_block.six:hover .data_icon{
  //   background-image: url('../../assets/images/icon11.png');
  // }
  // .data_block.seven .data_icon{
  //   background-image: url('../../assets/images/icon14.png');
  // }
  // .data_block.seven:hover .data_icon{
  //   background-image: url('../../assets/images/icon13.png');
  // }
  // .data_block.eight .data_icon{
  //   background-image: url('../../assets/images/icon16.png');
  // }
  // .data_block.eight:hover .data_icon{
  //   background-image: url('../../assets/images/icon15.png');
  // }
  .data_num{
    font-size: 20px;
    font-weight: bold;
  }
  .echarts{
    width: 100%;
    height: 400px;
    position: relative;
  }
  .bar_list{
    margin-top: 20px;
  }
  .bar_item{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size:14px;
    color:#434556;
  }
  .bar_item:hover .bar_title,.bar_item:hover .score{
    font-weight: bold;
  }
  .bar_title{
    width: 120px;
    flex-shrink: 0;
    text-align: right;
  }
  .progress{
    min-width: 0;
    height: 18px;
    background: #FF9E9E;
    border-radius: 0 8px 8px 0;
    margin:0 15px;
  }
  .bar_item:hover .progress{
    background:#FF8282;
  }
  .progress_company{
    background: #FFD58E;
  }
  .bar_item:hover .progress_company{
    background:#FFC96E;
  }
  .iconfont{
    font-size: 16px;
    margin-right: 10px;
    color:#3EA6FB;
  }
  .companyData{
    height: 400px;
  }
</style>